<style>
  .container{
    background:lightblue;
  }
  .plus,.cross{
    font-size:30px;
    cursor:pointer;
  }
  .plus{
    color:green;

  }
  .cross{
    color:red;
  }

  input{
    font-size:20px;
    margin:10px;
  }
</style>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>

<script type="text/javascript">
  jQuery(document).ready(function(){


    $('.parent').on('click',function(){
      //alert($(this).is(':checked'))
      if($(this).is(':checked') == true) {
        $('.child').prop('checked',true);
      } else {
        $('.child').prop('checked',false);
      }
    });

    $('.child').on('click',function(){
      //alert($(this).is(':checked'))
      if($(this).is(':checked') == true) {

        if($('.child').size() == $('.child:checked').size()) {
          $('.parent').prop('checked',true);
        }

      } else {
        $('.parent').prop('checked',false);
      }
    });

    $('.container').on('click','.cross',function(){
      $(this).closest('div').remove();
      $('.container').find('.plus:last').show();
    });
  });
</script>

<div class="container">
  <input type="checkbox" class="parent" />
</div>
<div class="abstract">
  <input type="checkbox" class="child" />One<br>
  <input type="checkbox" class="child" />Two<br>
  <input type="checkbox" class="child" />Three<br>
  <input type="checkbox" class="child" />Four<br>
  <input type="checkbox" class="child" />Five<br>
  <input type="checkbox" class="child" />Six<br>
</div>
